
/* 基础布局样式设置 */
/* 管理员主体内容区域样式，控制位置和滚动 */
.layui-layout-admin .layui-body {
    top: 60px;           /* 顶部导航栏高度 */
    left: 220px;        /* 默认左侧菜单宽度 */
    right: 0;
    bottom: 0;
    padding: 20px;      /* 内容区域内边距 */
    overflow-y: auto;   /* 内容超出时显示滚动条 */
    transition: all 0.3s ease;  /* 平滑过渡效果 */
    background-color: #f9f9f9;  /* 背景色 */
}

/* 平板设备响应式布局调整 */
@media screen and (max-width: 1024px) {
    .layui-layout-admin .layui-body {
        left: 60px;     /* 缩小左侧菜单宽度 */
    }
}

/* 移动设备响应式布局调整 */
@media screen and (max-width: 768px) {
    .layui-layout-admin .layui-body {
        left: 0;        /* 隐藏左侧菜单 */
        padding: 10px;  /* 减少内边距 */
    }
}

/* 内容容器样式，使用Flex布局实现居中 */
.main-wrapper {
    display: flex;              /* Flex布局 */
    justify-content: center;    /* 水平居中 */
    align-items: center;        /* 垂直居中 */
    width: 100%;                /* 宽度100% */
    height: 100%;               /* 高度100% */
}

/* 内容卡片样式，提升视觉效果 */
.content-card {
    width: 80%;                 /* 卡片宽度 */
    max-width: 1000px;          /* 最大宽度 */
    height: 80%;                /* 卡片高度 */
    max-height: 700px;          /* 最大高度 */
    padding: 20px;              /* 内边距 */
    background: #fff;           /* 背景色 */
    border-radius: 6px;         /* 圆角 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);  /* 阴影效果 */
    transition: all 0.3s ease;  /* 平滑过渡 */
    overflow-y: auto;           /* 内容溢出时滚动 */
    box-sizing: border-box;     /* 盒子模型计算方式 */
}

/* 鼠标悬停时卡片阴影加深 */
.content-card:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

/* 移动端适配，调整卡片尺寸 */
@media screen and (max-width: 768px) {
    .content-card {
        width: 95%;             /* 更宽的卡片 */
        height: 90%;            /* 更高的卡片 */
        padding: 15px;          /* 减少内边距 */
    }
}

/* 导航菜单统一蓝色样式 */
.layui-nav,
.layui-nav-tree,
.layui-nav-child {
    background-color: #1E9FFF !important;  /* 菜单背景色 */
}

/* 导航图标样式 */
.layui-nav .layui-icon {
    color: rgba(255, 255, 255, 0.9);  /* 图标颜色 */
    margin-right: 8px;                /* 图标右边距 */
}

/* 导航项文本样式 */
.layui-nav-item a {
    height: 44px;                     /* 项高度 */
    line-height: 44px;                /* 行高 */
    padding-left: 25px;               /* 左内边距 */
    color: #fff !important;           /* 文本颜色 */
    background-color: #1E9FFF !important; /* 背景色 */
    transition: background-color 0.2s ease; /* 过渡效果 */
}

/* 导航项悬停和展开样式 */
.layui-nav-item a:hover,
.layui-nav-itemed > a {
    background-color: #036eb7 !important; /* 悬停背景色 */
}

/* 子菜单项样式 */
.layui-nav-child a {
    padding-left: 40px;               /* 左内边距，缩进显示层级 */
    color: #fff !important;           /* 文本颜色 */
    background-color: #1E9FFF !important; /* 背景色 */
}

/* 子菜单项悬停样式 */
.layui-nav-child a:hover {
    background-color: #036eb7 !important; /* 悬停背景色 */
}

/* 头部样式优化 */
.layui-header {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 顶部阴影 */
    transition: all 0.3s ease;                /* 过渡效果 */
}

/* Logo样式 */
.layui-logo {
    height: 60px;                          /* Logo高度 */
    line-height: 60px;                     /* 行高 */
    overflow: hidden;                      /* 溢出隐藏 */
}

/* 内容卡片最小高度修正 */
.content-card {
    min-height: 400px;                     /* 最小高度 */
}
